import React, {Component} from 'react';
import {Button, Select, Space} from "antd";
import store from '../redux/store'
import {decreaseFun, incrementFun} from "../redux/count_action";

export default class Calculate extends Component {
    state={value:0}
    andleChange=(e)=>{
     this.setState({value:e})
    }
    componentDidMount() {
        //检测redux中状态的变化，只要变化，就调用render
        store.subscribe(() => {
            // this.setState({})
            this.forceUpdate()
        })
    }

    incrementClick=()=>{
      const{value}=this.state
        // this.setState({count:count+value*1})
        store.dispatch(incrementFun(value))
    }
    decreaseClick=()=>{
        const{value}=this.state
        // this.setState({count:count-value*1})
        store.dispatch(decreaseFun(value))
    }
    render() {
        return (
            <div>
                <Space>
                <span>计算结果：{store.getState()}</span>
                <Select
                    defaultValue="1"
                    style={{ width: 120 }}
                    onChange={this.andleChange}
                    options={[
                        { value: 1, label: '1' },
                        { value: 2, label: '2' },
                        { value: 3, label: '3' },
                    ]}
                />
                <Button type='primary' onClick={this.incrementClick}>+</Button><Button type='primary' onClick={this.decreaseClick}>-</Button></Space>
            </div>
        );
    }
}
